<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.name" style="width: 200px;" class="mj-inp" placeholder="姓名" clearable @change="handleFilter" />
      <el-input v-model="listQuery.company" style="width: 200px;" class="mj-inp" placeholder="公司" clearable @change="handleFilter" />
      <el-input v-model="listQuery.department" style="width: 200px;" class="mj-inp" placeholder="部门" clearable @change="handleFilter" />
      <el-input v-model="listQuery.status" style="width: 200px;" class="mj-inp" placeholder="状态" clearable @change="handleFilter" />
      <el-button type="primary" size="small">搜索</el-button>
      <el-button type="primary" size="small">添加</el-button>
      <el-button type="primary" size="small">修改</el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
      :header-cell-style="{background:'#f2f2f2',color:'#606266',height:'10px',padding:'5px'}" height="680px"
      :row-style="{height:'40px',padding:'0px'}" :cell-style="{padding:'0px'}">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" label="ID" width="195">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="公司名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.company }}
        </template>
      </el-table-column>
      <el-table-column label="部门" align="center">
        <template slot-scope="scope">
          {{ scope.row.department }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="职位">
        <template slot-scope="scope">
          {{ scope.row.type }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current_page" :page-sizes="[15, 50, 100]"
        :page-size="per_page" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: null,
      current_page: null,
      last_page: null,
      per_page: null,
      listQuery: {
        name: undefined,
        company: undefined,
        department: undefined,
        status: undefined,
        type: undefined,
        page: 1,
        pagesize: 10
      }
    };
  },
  created() {
    this.getLists();
  },
  methods: {
    // 获取展示列表数据
    getLists() {
      this.listLoading = true;

      axios
        .post(
          "http://rap2.taobao.org:38080/app/mock/260114/user/get_list",
          this.listQuery
        )
        .then(res => {
          this.list = res.data.data;
          this.current_page = res.data.current_page;
          this.per_page = res.data.per_page;
          this.last_page = res.data.last_page;
          this.total = res.data.total;
          console.log(res.data);

          this.listLoading = false;
        });
    },
    // 分页相关方法
    handleFilter() {
      this.listQuery.page = 1;
      this.getLists();
    },
    handleSizeChange(val) {
      this.listQuery.pagesize = val;
      this.getLists();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getLists();
    }
  }
};
</script>

<style>
</style>

<style scoped>
/* 输入框样式 */
div >>> .el-input__inner {
  border-radius: 2px;
  height: 32px;
}

.filter-container {
  margin-bottom: 12px;
}

.app-container {
  border: #eee solid 10px;
}

.pagination-container {
  padding-top: 10px;
}
</style>
